<template>
    <div>
        <el-dialog :title="form.id ? '编辑分配规则' : '添加分配规则'" width="800px" :visible.sync="dialogVisible">
            <el-form ref="ruleForm" :model="form" :rules="rules" label-width="80px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item prop="name" label="规则名称">
                            <el-input v-model="form.name" type="text" placeholder="请输入规则名称" style="width: 100%;" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item prop="from" label="来源渠道">
                            <el-select v-model="form.from" multiple placeholder="请选择来源渠道" style="width: 100%;">
                                <el-option v-for="item, index in dict.from_list" :key="index" :label="item.name" :value="item.id" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="城市">
                            <el-input v-model="form.city" type="text" placeholder="请输入城市名称，英文逗号分隔" style="width: 100%;" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="分配方式">
                            <el-radio-group v-model="form.fenpei_type">
                                <el-radio label="1">按顺序分配</el-radio>
                                <el-radio label="2">按权重分配</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="规则状态">
                            <el-switch v-model="form.status" active-value='1' inactive-value="0" active-color="#13ce66" inactive-color="#ff4949" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleSubmit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { mapState } from 'vuex'
import { saveDeptRule } from '@/api/merchantPool'
import { deepClone } from '@/util'
export default {
    components: {},
    data() {
        return {
            dialogVisible: false,
            props: { multiple: true },
            form: {
                id: null,
                from: '',
                city: '',
                name: '',
                fenpei_type: '1',
                status: '1'
            },
            rules: {
                name: [{ required: true, message: '请输入名称', trigger: 'change' }],
                from: [{ required: true, message: '请选择来源', trigger: 'change' }]
            },
            userList: []
        }
    },
    computed: {
        ...mapState(["dict"])
    },
    methods: {
        showDialog(item) {
            this.dialogVisible = true;
            if (item && item.id) {
                this.form = deepClone(item);
                this.form.from = this.form.from.split(',');
                this.form.fenpei_type = this.form.fenpei_type || '1';
            } else {
                this.resetParams();
            }
            this.resetForm();
        },
        resetForm() {
            this.$nextTick(() => {
                this.$refs.ruleForm.resetFields();
            })
        },
        resetParams() {
            this.$nextTick(() => {
                this.form = {
                    id: null,
                    from: '',
                    city: '',
                    name: '',
                    fenpei_type: '1',
                    status: '1'
                };
            })
        },
        handleSubmit(e) {
            this.$refs.ruleForm.validate(valid => {
                if (valid) {
                    this.form.from = this.form.from.join(',');
                    saveDeptRule(this.form).then(res => {
                        if (res.status == '1') {
                            this.$message.success('操作成功！')
                            this.$emit('success', res)
                        } else {
                            this.$message.error(res.message)
                        }
                    }).finally(() => {
                        this.dialogVisible = false
                    })
                }
            })
        }

    }
}
</script>
<style lang="scss" scoped>
.tabs {
    border-right: 1px solid #eee;
    padding-right: 20px;
    .item {
        color: #333;
        border: 1px solid #eee;
        border-radius: 4px;
        margin-bottom: 20px;
        padding: 10px;
        cursor: pointer;
        .title {
            font-size: 16px;
        }
        .desc {
            margin-top: 10px;
            font-size: 12px;
            color: #999;
        }
    }
    .item-checked {
        color: #409eff;
        border-color: #409eff;
        background: #edf0fd;
        .desc {
            color: #409eff;
        }
    }
}
.form-item {
    .tip {
        font-size: 12px;
        color: #999;
        line-height: 1.5em;
    }
}
</style>